import React, { Suspense, lazy } from 'react';
import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';

import AuthRoue from './AuthRoute';

import Index from '@src/page/demo'

const Intro = lazy(() => import('@src/page/demo/Intro'));
const Auto = lazy(() => import('@src/page/demo/Auto'));

const DocLive = lazy(() => import('@src/page/demo/DocLive'));
const Button = lazy(() => import('@src/page/demo/Button/index.js'));
const ModalMdx = lazy(() => import('@src/page/demo/Modal/index.js'));
const AlertMdx = lazy(() => import('@src/page/demo/Alert/index.js'));

const DemoCard = lazy(() => import('@src/page/demo/DemoCard'));
const SpaceWraper = lazy(() => import('@src/page/demo/SpaceWraper/index.js'));

//loginMask 选直接到index.html写一下样式哈

const MyRouter = () => (
    <Router>
        <Suspense fallback={<div className="loadingMask"></div>}>
            <Index>
                <Switch>

                    <AuthRoue path='/Intro' component={Intro} />
                    <AuthRoue path='/Auto' component={Auto} />

                    <AuthRoue path='/DocLive' component={DocLive} />
                    <AuthRoue path='/Button' component={Button} />

                    <AuthRoue path='/Modal' component={ModalMdx} />
                    <AuthRoue path='/Alert' component={AlertMdx} />

                    <AuthRoue path='/SpaceWraper' component={SpaceWraper} />
                    <Route path='/' component={DocLive} />
                </Switch>
            </Index>

        </Suspense>

    </Router>
);

export default MyRouter;